import welcome from "@/assets/images/welcome.jpg";
import "./index.less";
import { Card, Carousel, Col, Row, Statistic } from "antd";
import HeadStat from "./headStat";
import ReactECharts from 'echarts-for-react';

const Home = () => {
	const contentStyle: React.CSSProperties = {
		margin: 0,
		height: '400px',
		color: '#fff',
		lineHeight: '400px',
		fontSize: 72,
		textAlign: 'center',
		background: '#364d79',
	  };

	const onChange = (currentSlide: number) => {
		console.log(currentSlide);
	  };

	const option = {
		xAxis: {
		  type: 'category',
		  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
		  type: 'value'
		},
		series: [
		  {
			data: [120, 200, 150, 80, 70, 110, 130],
			type: 'bar'
		  }
		]
	  };

	return (
		<div className="home">
			<HeadStat />
			<Row style={{width:'100%', marginTop:10}} gutter={8}>
				<Col span={12}>
					<Card>
						<Carousel autoplay={ true } autoplaySpeed={5000} afterChange={onChange}>
							<div>
								<h3 style={contentStyle}><img src={welcome} alt="welcome" /></h3>
							</div>
							<div>
								<h3 style={contentStyle}>2</h3>
							</div>
							<div>
								<h3 style={contentStyle}>3</h3>
							</div>
							<div>
								<h3 style={contentStyle}>4</h3>
							</div>
						</Carousel>
					</Card>
				</Col>
				<Col span={12}>
					<Card>
						<ReactECharts style={{height: 400}} option={option} />
					</Card>
				</Col>
			</Row>
		</div>
	);
};

export default Home;
